<!DOCTYPE html>
<html>
<head>
    <title>Overview</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div id="music" data-role="view" data-title="My Music">
    <div class="head">&nbsp;</div>
    <h2>Welcome to "My Music" App</h2>
    <p>A native-looking web based mobile application.</p>
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>I want to:
            <ul>
                <li data-icon="play"><a href="../../content/mobile/application/play-music.html">Play Music</a></li>
                <li data-icon="cart"><a href="../../content/mobile/application/music-store.html">Buy Music</a></li>
            </ul>
        </li>
    </ul>
</div>
<style scoped>
#music .head {
	display: block;
	margin: 1em;
	height: 110px;
	background: url(../../content/mobile/shared/mymusic.jpg) no-repeat center center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
.km-ios #music .head {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
